<template>
  <div class="waterMeterLeftTree">
    <div class="title">
        <span>选择小区</span>
        <button class="titleButton" @click="clickLeft">
            <i class="el-icon-caret-left"></i>
        </button>
        <!-- <el-button icon="el-icon-caret-left"></el-button> -->
        <!-- <i class="el-icon-caret-left"></i> -->
    </div>
    <div class="search">
        <el-input
            placeholder="请输入关键字"
            v-model="filterText"
            class="searchFont"
            clearable
        >
        </el-input>
        <!-- <i class="el-icon-d-caret"></i> -->
        <button class="searchButton" @click="changeDefault">
            <i class="el-icon-d-caret"></i>
        </button>
        <!-- <i class="el-icon-caret-top"></i> -->
    </div>
    <!-- {{areaData}} -->
    <el-tree
        class="filter-tree"
        :data="areaData"
        :props="defaultProps"
        :default-expand-all="defaultTree"
        :filter-node-method="filterNode"
        node-key="id"
        @node-click="handleNodeClick"
        ref="tree"
    >
        <!-- icon-class='el-icon-folder' -->
    </el-tree>
  </div>
</template>

<script>
  import {
    getTree, //区域树--小区资料全部
  } from "@/api/baseManage/flCommunity/index";
  import {
      getTreeOfCompany
  } from "@/api/dealer/flSdealerRubill/index"
  export default {
    name:'waterMeterLeftTree',
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
        forAll(arr,isExpand){
            arr.forEach(i => {
                this.$refs.tree.toggleRowExpansion(i, isExpand)
                if (i.children) {
                    this.forArr(i.children, isExpand)     
                }
            })
        },
        expandAll(){
            this.forAll(this.areaData , true)
        },
        collapseAll(){
            this.forAll(this.areaData , false)
        },
        handleNodeClick(a,b,c){
            // console.log(a,b,c,999);
            this.$emit('areaIf',a.code)
        },
        // 点击按钮
        clickLeft(){
            this.$emit('clickClose', "点击隐藏")
        },
        // 获取树资料
        async getTreeData(){
            let obj = {}
            // 水司code
            console.log(this.$store.getters.waterGrapCodeData,'水司code');
            let sysCompanyCode = this.$store.getters.waterGrapCodeData
            obj['sysCompanyCode'] = sysCompanyCode
            const res = await getTreeOfCompany(obj)
            // console.log(res);
            this.areaData = res.data
            this.changeLabel(this.areaData)
        },
        // 转为label
        changeLabel(arr){
            arr.forEach(item => { 
                for(var key in item) {
                    if( key === 'name' ) {
                        item['label'] = item[key]
                        delete item[key]                              
                    } 
                    if ( key === 'children') {
                        var arr1 = item[key]
                        this.changeLabel(arr1)
                    }
                }                                  
            })
        },
        // 刷新树
        // buildTree(){
        //     for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        //         this.$refs.tree._getAllNodes()[i].expanded = this.defaultTree      
        //     }
        // },
        //   改变展开
        changeDefault(){
            let defaultTree = this.defaultTree
            console.log(this.defaultTree);
            
            this.defaultTree = !defaultTree
            // 测试。。。。。。。。。。。。。。。。。测试
            this.forAll(this.areaData , defaultTree)
            // this.buildTree()
        },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
    created(){
        this.getTreeData()
    },


    data() {
      return {
        //   显示开关
        //   小区资料数据
        areaData:[],
        //   展开开关
        defaultTree:true,
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

<style lang="scss" scoped>
.waterMeterLeftTree{
    border-right: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    padding: 2px;
    height: 100vh;
    .title{
        height: 48px;
        border-bottom: 1px solid #E6E6E6;
        text-align: left;
        font-size: 15px;
        // font-weight: 700;
        padding: 10px 10px 0px 10px;
        // .el-icon-caret-left{
        //     float:right;
        //     margin-right: -10px;
        // }
        .titleButton{
            width: 12px;
            height: 18px;
            border:0;
            padding: 0;
            float: right;
            margin-right:-10px;
            .el-icon-caret-left{
                margin: -10px 0px 0px 0px;
                font-size: 16px;
                width: 12px;
                height: 18px;
            }
        }
    }
    .search{
        display: flex;
        justify-content: center;
        align-items: center;
        .searchFont{
            margin:10px;
            /deep/.el-input__inner{
                width: 166px;
                height: 24px;
            }
        }
        .searchButton{
            border:0;
            padding: 0;
            float: right;
            .el-icon-d-caret{
                margin: 0;
            }
        }
    }
}
</style>